 <template>
 	<view>
 		<view class="state-box">
 			<view class="headline">
 				<view style="display:flex;justify-content:space-between">
 					<view style="font-size: 12px !important;font-weight: 400;">任务名称：{{form.taskName}}</view>
 				</view>
 			</view>
 			<view class="information">
 				任务编码：{{form.taskCode}}
 			</view>
 			<view class="information">
 				预计开始时间：{{form.planStartTime}}
 			</view>
			<view class="information">
 				预计结束时间：{{form.planEndTime}}
 			</view>
 			<!-- </view> -->
 		</view>

 		<view class="box">
				<view class="">
					<span class="span1">计划名称：</span><span class="span2">{{form.planName}}</span>
				</view>
				<view class="">
					<span class="span1">计划编码：</span><span class="span2">{{form.planCode}}</span>
				</view>
				<view class="">
					<span class="span1">计划类型：</span><span class="span2">{{form.planType}}</span>
				</view>
 		
 		</view>

 	</view>
 </template>

 <script>
 	import {
 		getDetails
 	} from "@/api/facilityPatrol/xunjian.js"
 	export default {
 		data() {
 			return {
 				form: {}
 			}
 		},
 		onLoad(options) {
 			this.getDetails(options.taskId)
 			// this.getTaskList()
 		},
 		methods: {
 			// 详情数据
 			getDetails(taskId) {
 				getDetails(taskId).then(res => {
 					this.form = res.data
					console.log(this.form);
 				})
 			}
 		}
 	}
 </script>

 <style lang="scss">
 	.state-box {
 		// width: 50px !important;
 		// border-radius: 4px;
 		// line-height: 46rpx;
 		margin: 32rpx 32rpx 48rpx 32rpx;
 		padding: 48rpx 0 32rpx 32rpx;
 		// height: 450rpx;
 		opacity: 1;
 		border-radius: 20rpx;
 		background: rgba(255, 255, 255, 1);
 		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);

 		.information {
 			opacity: 0.3;
 			/** 文本1 */
 			font-size: 24rpx;
 			font-weight: 400;
 			color: rgba(0, 0, 0, 1);
 			margin-top: 30rpx;

 		}

 		.headline {
 			height: 38rpx;
 			opacity: 1;
 			/** 文本1 */
 			font-size: 32rpx;
 			font-weight: 700;
 			letter-spacing: 0px;
 			line-height: 38rpx;
 			color: rgba(32, 37, 64, 1);
 			text-align: left;
 			vertical-align: top;
 			width: 93%;
 		}

 	}

 	.texter {
 		background: linear-gradient(90deg, rgba(255, 87, 51, 0.1) 0%, rgba(212, 39, 0, 0.1) 100%);
 		border-radius: 8rpx;
 		width: 120rpx;
 		height: 40rpx;
 		line-height: 42rpx;
 		text-align: center;
 		font-size: 2rpx;
 		font-weight: 400;
 		color: rgba(255, 87, 51, 1);

 	}


 	.box {

 		margin: 0 64rpx 35rpx 64rpx;

 		opacity: 1;

 		background: rgba(255, 255, 255, 1);
 		// border-bottom: 2rpx solid rgba(32, 37, 64, 0.06);

 		.span1 {
 			height: 30rpx;
 			opacity: 0.3;
 			/** 文本1 */
 			font-size: 24rpx;
 			font-weight: 400;
 			letter-spacing: 0px;
 			line-height: 30rpx;
 			color: rgba(32, 37, 64, 1);
 			text-align: right;
 		}
 		
 		.span2 {
 			height: 30rpx;
 			opacity: 1;
 			/** 文本1 */
 			font-size: 24rpx;
 			font-weight: 400;
 			line-height: 30rpx;
 			color: rgba(32, 37, 64, 1);
 			text-align: left;
 		}
 	}

 	.box1 {
 		border-bottom: none;

 	}
 </style>